<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Points set扣分设置</title>
    <!-- 增加扣分项 -->
    <!-- 扣分设置-->
    <!-- 基本信息界面 -->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div>
<div id="head" style="font-size: xx-large;text-align: center;margin-top: 120px" >
    {{massage}}
</div>
<div id="table" style="text-align: center;margin-top: 70px">
<el-form :inline="true" :model="formInline" class="demo-form-inline"  ref="formInline">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="选择单位">

            <el-select v-model="formInline.unit" placeholder="选择单位">
                <el-option v-for="item in unit" :key="item.id" :label="item.name" :value="item.name" ></el-option>
            </el-select>
        </el-form-item></br>

        <el-form-item label="扣分项目">
            <el-select v-model="formInline.name" placeholder="扣分项目内容">
                <el-option v-for="item in content" :key="item.id" :label="item.name" :value="item.name" ></el-option>
            </el-select>
        </el-form-item></br>


        <el-form-item label="扣除分数">
        <el-select  v-model="formInline.score" placeholder="扣除分数">
            <el-option v-for="item in options" :key="item.id" :label="item.score" :value="item.score" ></el-option>
        </el-select >



    </el-form-item></br>


        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">提交</el-button>&nbsp;&nbsp;&nbsp;
            <el-button type="primary" plain @click="qingkong">清空数据</el-button>
        </el-form-item>
    </el-form>



</el-form>
</div>
</div>
</body>

<script>
    var head=new Vue({
        el:"#head",
        data:{
            massage:"增加扣分项"
        }
    })

    var table=new Vue({
        el: '#table',
        data: {
            options:[
                {
                    options:""
                }
                ],value:"",
            scoreOptions:[],
            //编辑界面数据
            formInline:{
                unit:'',
                name:'',
                score:''
            },
        },created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            axios.post('/PointSet/score').then(function(response){
                self.options=response.data.options;
                //self.scoreOptions=response.data.scoreOptions;
                self.content=response.data.content;
                self.unit=response.data.unit;

            })
        },
        methods:{
            onSubmit:function(){
                var self=this;
                var FormDate=this.formInline;
                var unit=this.formInline.unit;
                var name=this.formInline.name;
                var chachong={"unit":unit,"name":name}
                axios.post("/PointSet/chachong",chachong).then(function(response){
                        if (response.data==1){
                            const h = self.$createElement;
                            self.$notify({
                                title: '重复提交',
                                message: h('i', { style: 'color: teal'}, '此扣分项无法提交')
                            });
                        }
                        if (response.data==0){
                            alert(FormDate.score)
                            if (FormDate.unit==null||FormDate.unit==""||FormDate.score==null||FormDate.score==""){
                                self.$notify.error({
                                    title: '没有信息或信息不完整',
                                    message: '无法提交'
                                });
                            }
                            axios.post("/PointSet/pointset",FormDate).then(function(response){
                                if(response.data==0){
                                    self.open();
                                }else{
                                    self.open2();
                                }
                            })
                        }
                })
            },
            qingkong:function(){
                this.formInline.unit=null;
                this.formInline.name=null;
                this.formInline.score=null;
                this.$notify({
                    title: '清空数据成功',
                    message: '如有新的扣分项，请重新填写',
                    type: 'success'
                });
            },
            open:function () {
                this.$notify({
                    title: '成功',
                    message: '扣分管理提交成功，请至审核管理，进行扣分审核',
                    type: 'success'
                });
            },open2:function () {
                this.$notify.error({
                    title: '没有信息或信息不完整',
                    message: '无法提交'
                });
            }
        }
        })

</script>
</html>